import React from "react";
// import BaseScreen from "../BaseScreen";
import ProgressView from "../../view/ProgressView";
// import { Actions, NameSpace } from "../../model/attendanceModel";
// import { connect } from "react-redux";
import styles from "../../css/attendance.module.css";
import { locationTo } from "../../utils/LocationUtil";
import * as locations from '../../const/locations'
// import { MyButton } from "../../view/MyButton";
import Config from "../../Config";
import Panel from "../components/Picker/Panel"
import { monthList } from '../../const/datas'
// import DateMonth from '../components/dateComponents/dateMonth'
import { getMonthRecord } from '../../service/AttendService'
import { getTOKEN } from "../../utils/StorageUtil";
import { toArray, getLocalTime } from '../../utils/CommomUtil'
class StatScreen extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      itemSelected: monthList[0],
      panelOpen: false,
      visibility: [0, 0, 0, 0, 0, 0, 0, 0, 0],
      dateset: {},
      loading: false 
    }
  }
  componentDidMount() {
    document.title = '统计'
    this.getMonthRecord({
      date: monthList[0]
    })
  }
  getMonthRecord = (parmas) => {
    this.setState({ loading: true });
    
    getMonthRecord({
      token: getTOKEN(),
      ...parmas
    })
      .then(
        res => {
      this.setState({ loading: false });
          
          const data = res.data
          let dateset = {
            abnormal_card_dset: toArray(data.abnormal_card_dset),
            absenteeism_jset: JSON.parse(data.absenteeism_jset),
            absenteeism_num: data.absenteeism_num,
            early_jset: JSON.parse(data.early_jset),
            early_num: data.early_num,
            early_time: data.early_time,
            lack_card_jset: JSON.parse(data.lack_card_jset),
            lack_card_num: data.lack_card_num,
            late_jset: JSON.parse(data.late_jset),
            late_num: data.late_num,
            late_time: data.late_time,
            leave_date_jset: JSON.parse(data.leave_date_jset),
            leave_list_jset: JSON.parse(data.leave_list_jset),
            normal_card_dset: toArray(data.normal_card_dset),
            outside_card_num: data.outside_card_num,
            rest_dset: toArray(data.rest_dset),
            unstatis_dset: toArray(data.unstatis_dset),
            work_dset: toArray(data.work_dset),
          }
          this.setState({
            dateset: dateset
          })
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  showItem = (i) => {
    let visibility = [0, 0, 0, 0, 0, 0, 0, 0, 0]
    if (this.state.visibility[i] === 0) {
      visibility[i] = 1
    }
    this.setState({
      visibility: visibility
    })
  }
  // 选择日期
  getValue = (month) => {
    this.getMonthRecord({
      date: month
    })
  }
  render() {
    const { visibility,
      dateset: {
        abnormal_card_dset,/*异常打卡 - 天集合*/
        absenteeism_jset,/*旷工json集合*/
        absenteeism_num,// 旷工次数
        early_jset,// 请假 json集合
        early_num, //早退次数
        early_time,//早退总时长
        lack_card_jset,/*缺卡json集合*/
        lack_card_num, // 缺卡次数
        late_jset,// 迟到json集合
        late_num,// 迟到次数
        late_time,// 迟到总时间
        leave_date_jset,
        leave_list_jset,
        normal_card_dset,// 正常打卡 - 天集合
        outside_card_num, // 外勤打卡次数
        rest_dset,// 休息 - 天集合
        unstatis_dset,// 未统计的天的集合,当日统计未完成是会在该列表中存在
        work_dset,/*工作日 - 天集合 (本月应工作的天的 集合)*/
      }
    } = this.state
    return (
      <div className={styles["homes"]}>
        <div className={styles["stat_container"]}>
          <div className={styles["stat_item_w"]}>
            <div className={styles["stat_item_key"]}>
              选择月份
            </div>
            <div
              className={styles["stat_item_value"]}
              onClick={() => this.setState({ panelOpen: true })}
            >
              {this.state.itemSelected}
            </div>
          </div>
          <Panel
            show={this.state.panelOpen}
            onCancel={() => this.setState({ panelOpen: false })}
            onConfirm={value => {
              this.setState({ itemSelected: value.pass, panelOpen: false });
              this.getValue(value.pass)
            }}
            list={monthList}
          />
        </div>
        <div className={styles["stat_secondLine"]}>
          <div className={styles["stat_item_value"]}>
            考勤月汇总
          </div>
          <div
            className={styles["stat_item_value"]}
            style={{ color: Config.BaseColor }}
            onClick={() => { locationTo(locations.CALENDAR)}}
          >
            打卡日历
          </div>
        </div>

        <div className={styles["stat_container"]}>

          {work_dset && <StatItem name='需考勤天数'
            des={work_dset.length + '天'}
            list={work_dset}
            type='1'
            visibility={visibility[0]}
            showItem={this.showItem}
            index='0'
          />}
          {normal_card_dset && <StatItem name='实际出勤天数'
            des={normal_card_dset.length + '天'}
            list={normal_card_dset}
            type='1'
            visibility={visibility[1]}
            showItem={this.showItem}
            index='1'
          />}

          <StatItem name='外勤'
            des={outside_card_num+'天'}
            list={[]}
            type='2'
            visibility={visibility[2]}
            showItem={this.showItem}
            index='2'
          />
          {rest_dset && <StatItem name='休息天数'
            des={rest_dset.length + '天'}
            list={rest_dset}
            type='1'
            visibility={visibility[3]}
            showItem={this.showItem}
            index='3'
          />}
          {leave_list_jset && <StatItem name='请假时间'
            des={leave_list_jset.length + '次'}
            list={leave_list_jset}
            type='3'
            visibility={visibility[4]}
            showItem={this.showItem}
            index='4'
          />}
          {late_jset && <StatItem name='迟到'
            des={late_num + '次，共' + Math.round(late_time / 60) + '分钟'}
            list={late_jset}
            type='2'
            visibility={visibility[5]}
            showItem={this.showItem}
            index='5'
          />}
          {early_jset && <StatItem name='早退'
            des={early_num + '次，共' + Math.round(early_time / 60) + '分钟'}
            list={early_jset}
            type='2'
            visibility={visibility[6]}
            showItem={this.showItem}
            index='6'
          />}
          {lack_card_jset && <StatItem name='缺卡'
            des={lack_card_num + '次'}
            list={lack_card_jset}
            type='2'
            isLack='true'
            visibility={visibility[7]}
            showItem={this.showItem}
            index='7'
          />}
         { absenteeism_jset&&<StatItem name='旷工'
            des={absenteeism_num+'天'}
            list={absenteeism_jset}
            type='1'
            visibility={visibility[8]}
            showItem={this.showItem}
            index='8'
          />}
        </div>
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />
        
      </div>
    )
  }
}

class StatItem extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const { name, des, list, type, visibility, showItem, index, isLack } = this.props
    return (
      <div>
        <StatItemName
          name={name}
          des={des}
          click={() => {
            showItem(index)
          }}
        />
        {visibility === 1 &&
          <div className={styles["stat_container"]}>
            {
              list.map((item, index) => {
                return (
                  <div className={styles["stat_item"]}
                    key={index}
                    style={{ height: type === '1' ? '40px' : '50px' }}
                  >
                    {type === '1' &&
                      <ListItem1 item={item} />
                    }
                    {type === '2' &&
                      <ListItem2 item={item} isLack={isLack} />
                    }
                    {type === '3' &&
                      <ListItem3 item={item} />
                    }
                  </div>
                )
              })
            }

          </div>
        }
      </div>
    )
  }
}

const ListItem1 = ({ item }) => {
  return (
    <div className={styles["stat_item_borderBottom"]}>
      <div className={styles["stat_item_key"]}>
        {item.date?item.date:item}
      </div>
    </div>
  )
}
const ListItem2 = ({ item, isLack }) => {
  return (
    <div className={styles["stat_item_borderBottom"]}>
      <div>
        <div className={styles["stat_item_key"]}>
          {item.date}
        </div>
        {!isLack && <div className={styles["stat_item_value"]}>
          {Math.floor(item.diff_second / 60) > 0 &&
            <span>{Math.floor(item.diff_second / 60) + '秒'}</span>
          }
          {item.diff_second % 60 + '秒'}
        </div>
        }
        {isLack &&
          <div className={styles["stat_item_value"]}>
            班次 {item.time}
          </div>
        }
      </div>

    </div>
  )
}
const ListItem3 = ({ item }) => {
  return (
    <div className={styles["stat_item_borderBottom"]}>
      <div
        className={styles["stat_item_key"]}
        style={{ flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}
      >

        <div>
          {getLocalTime(item.apply_start_time, 20)}
        </div>
        <div>
          {getLocalTime(item.apply_end_time, 20)}
        </div>
      </div>
      <div className={styles["stat_item_value"]}>
        共{Math.floor(item.diff_time / 3600) > 0 &&
          <span> {Math.floor(item.diff_time / 3600)}小时</span>
        }
      </div>
    </div>
  )
}

const StatItemName = ({ name, des, click }) => {
  return (
    <div
      className={styles["stat_item_w"]}
      onClick={click}
    >
      <div className={styles["stat_item_borderBottom"]}>

        <div className={styles["stat_item_key"]}>
          {name}
        </div>
        <div className={styles["stat_item_value"]}>
          {des}
        </div>
      </div>
    </div>
  )
}
export default StatScreen